<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修仙贪吃蛇 - 蛇化龙传说</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="game-container">
        <div class="game-header">
            <h1>🐍 修仙贪吃蛇 🐲</h1>
            <div class="cultivation-info">
                <div class="realm">
                    <span class="realm-label">当前境界：</span>
                    <span id="currentRealm" class="realm-name">凡蛇期</span>
                </div>
                <div class="experience">
                    <span class="exp-label">修为：</span>
                    <div class="exp-bar">
                        <div id="expFill" class="exp-fill"></div>
                    </div>
                    <span id="expText" class="exp-text">0/50</span>
                </div>
            </div>
            <div class="score-board">
                <div class="score">灵力: <span id="score">0</span></div>
                <div class="high-score">最高境界: <span id="highScore">凡蛇期</span></div>
            </div>
        </div>
        
        <div class="game-area">
            <canvas id="gameCanvas" width="1000" height="700"></canvas>
            
            <!-- 移动端虚拟方向按键 -->
            <div class="virtual-controls" id="virtualControls">
                <div class="virtual-dpad">
                    <button class="virtual-btn virtual-up" data-direction="up">↑</button>
                    <div class="virtual-middle">
                        <button class="virtual-btn virtual-left" data-direction="left">←</button>
                        <button class="virtual-btn virtual-right" data-direction="right">→</button>
                    </div>
                    <button class="virtual-btn virtual-down" data-direction="down">↓</button>
                </div>
            </div>
            
            <!-- 技能UI界面 -->
            <div class="skills-panel" id="skillsPanel">
                <h3>神通技能</h3>
                <div class="skills-container">
                    <div class="skill-item" id="skill-lingqi" data-skill="lingqi">
                        <div class="skill-icon">🛡️</div>
                        <div class="skill-name">灵气护体</div>
                        <div class="skill-realm">筑基期</div>
                        <div class="skill-cooldown" id="cooldown-lingqi">就绪</div>
                        <div class="skill-overlay" id="overlay-lingqi"></div>
                    </div>
                    
                    <div class="skill-item" id="skill-shunyi" data-skill="shunyi">
                        <div class="skill-icon">⚡</div>
                        <div class="skill-name">瞬移术</div>
                        <div class="skill-realm">金丹期</div>
                        <div class="skill-cooldown" id="cooldown-shunyi">就绪</div>
                        <div class="skill-overlay" id="overlay-shunyi"></div>
                    </div>
                    
                    <div class="skill-item" id="skill-fenshen" data-skill="fenshen">
                        <div class="skill-icon">👻</div>
                        <div class="skill-name">元婴化身</div>
                        <div class="skill-realm">元婴期</div>
                        <div class="skill-cooldown" id="cooldown-fenshen">就绪</div>
                        <div class="skill-overlay" id="overlay-fenshen"></div>
                    </div>
                    
                    <div class="skill-item" id="skill-longwei" data-skill="longwei">
                        <div class="skill-icon">🐉</div>
                        <div class="skill-name">龙威震慑</div>
                        <div class="skill-realm">化神期</div>
                        <div class="skill-cooldown" id="cooldown-longwei">就绪</div>
                        <div class="skill-overlay" id="overlay-longwei"></div>
                    </div>
                    
                    <div class="skill-item" id="skill-tiandao" data-skill="tiandao">
                        <div class="skill-icon">🔥</div>
                        <div class="skill-name">天道轮回</div>
                        <div class="skill-realm">飞升期</div>
                        <div class="skill-cooldown" id="cooldown-tiandao">就绪</div>
                        <div class="skill-overlay" id="overlay-tiandao"></div>
                    </div>
                </div>
                <div class="skill-tips">
                    <p>灵气护体(被动) S-瞬移术 D-元婴化身</p>
                    <p>F-龙威震慑 G-天道轮回</p>
                    <p>🎮 按P键暂停/继续游戏 Q键切换自动修仙</p>
                </div>
            </div>
            
            <div class="realm-notification" id="realmNotification">
                <div class="notification-content">
                    <h2 id="realmTitle">突破成功！</h2>
                    <p id="realmMessage">恭喜进入筑基期！</p>
                </div>
            </div>
            <div class="game-overlay" id="gameOverlay">
                <div class="overlay-content">
                    <h2 id="overlayTitle">修仙之路暂告一段落</h2>
                    <p id="overlayMessage">最终境界: <span id="finalRealm">凡蛇期</span></p>
                    <p>获得灵力: <span id="finalScore">0</span></p>
                    <button id="restartBtn" class="btn">重新修仙</button>
                </div>
            </div>
        </div>
        
        <div class="controls">
            <div class="control-info">
                <p>使用方向键控制修仙之路</p>
                <p class="cultivation-tip">💡 吞噬灵果提升修为，突破境界获得神通！</p>
            </div>
            <div class="speed-control">
                <label for="speedSlider">修炼速度: <span id="speedValue">中等</span></label>
                <input type="range" id="speedSlider" min="1" max="5" value="3" class="speed-slider">
            </div>
            <div class="difficulty-control">
                <label for="difficultySelect">修仙难度: <span id="difficultyValue">普通</span></label>
                <select id="difficultySelect" class="difficulty-select">
                    <option value="1">简单 (灵力需求 ×0.8)</option>
                    <option value="2" selected>普通 (灵力需求 ×1.0)</option>
                    <option value="3">困难 (灵力需求 ×1.3)</option>
                    <option value="4">地狱 (灵力需求 ×1.6)</option>
                    <option value="5">修罗 (灵力需求 ×2.0)</option>
                </select>
            </div>
            <div class="control-buttons">
                <button id="startBtn" class="btn primary">开始修仙</button>
                <button id="autoPlayBtn" class="btn">自动修仙</button>
            </div>
        </div>

        <div class="realm-guide">
            <h3>修仙境界指南</h3>
            <div class="realm-list">
                <div class="realm-item">
                    <span class="realm-icon">🐍</span>
                    <span class="realm-name">凡蛇期</span>
                    <span class="realm-desc">0-5灵力</span>
                </div>
                <div class="realm-item">
                    <span class="realm-icon">✨</span>
                    <span class="realm-name">筑基期</span>
                    <span class="realm-desc">5-12灵力</span>
                </div>
                <div class="realm-item">
                    <span class="realm-icon">🥇</span>
                    <span class="realm-name">金丹期</span>
                    <span class="realm-desc">12-22灵力</span>
                </div>
                <div class="realm-item">
                    <span class="realm-icon">👻</span>
                    <span class="realm-name">元婴期</span>
                    <span class="realm-desc">22-35灵力</span>
                </div>
                <div class="realm-item">
                    <span class="realm-icon">⚡</span>
                    <span class="realm-name">化神期</span>
                    <span class="realm-desc">35-50灵力</span>
                </div>
                <div class="realm-item">
                    <span class="realm-icon">🐲</span>
                    <span class="realm-name">飞升期</span>
                    <span class="realm-desc">50+灵力 化龙飞升</span>
                </div>
            </div>
        </div>
    </div>
    
    <script src="script.js"></script>
</body>
</html>